<template>
  <!-- 损益单详情 -->
  <div class="manage">
  <div class="details-head">
    <div class="head-left">
      <div class="status">{{data.status || '损益单'}}</div>
      <div class="orderCode">{{data.orderNum}}</div>
    </div>
    <div class="head-right">
      <el-button class="btn-1" @click="goExamine" v-jurisdiction="'warehouse:plOrder:audit'">审核</el-button>
      <el-button class="btn-1" v-if="orderIsSelf" @click="cancelDelivery" v-jurisdiction="'warehouse:plOrder:cancel'">取消报废</el-button>
      <el-button class="btn-1" @click="goBack">返回</el-button>
    </div>
  </div>
  <div class="details-nav">
    <span>调拨类型:<span class="text-color">{{'暂无'}}</span></span>
    <span>调出仓库:<span class="text-color">{{data.outName || '暂无'}}</span></span>
    <span>发货人: <span class="text-color">{{data.createUserName || '暂无'}}</span></span>
    <span>收入单位:<span class="text-color">{{'暂无'}}</span></span>
    <span>调入仓库:<span class="text-color">{{data.inName || '暂无'}}</span></span>
    <span>收货人:<span class="text-color">{{'暂无'}}</span></span>
  </div>

  <div class="content">
      <ztable 
        :tableData='list' 
        :strucs='groupData'
        :height="'100%'"
      ></ztable>
  </div>
  
  </div>

    <zdialog @handleClose="close" v-model="dialogVisible" :btnData="btnData" title="调拨单审核">
			<template #body>
        <el-radio-group v-model="radioExamine" size="small"  class="radio-group-1">
          <el-radio label="通过" border>通过</el-radio>
          <el-radio label="不通过" border>不通过</el-radio>
        </el-radio-group>
			</template>
		</zdialog>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from '@vue/runtime-core'
import ztable from '@components/Table/index.vue'
import zdialog,{BtnData} from '../../components/dialog/dialog.vue'

import { useRoute, useRouter } from 'vue-router'

import useRequet, { RespData } from "../../hook/network"
import useConfgin from '../../hook/getconfig'
import { ElMessage } from 'element-plus'

const DETAIL = 517 // 损益单详情结构

type LossStateType = {
  status: string,
  dispatchNum: string,
  outName: string,
  createUserName: string,
  inName: string,
  orderNum: string
}
export default defineComponent({
  name: 'LossStatementDetails',
  components: {
    ztable,
    zdialog
  },
  setup(){
    const route = useRoute()
    const router = useRouter()
    const request = useRequet({ path: "" })
    const id = route.query.id
    const orderIsSelf = route.query.orderIsSelf
    const {groupData} = useConfgin(DETAIL)
    const details = reactive({
      list: [],
      data: {} as LossStateType,
      dialogVisible: false,
      radioExamine: '通过'
    })

    const goBack = () => {
      router.push({name: 'LossStatement'})
    }
    
    const req = () => {
      request.sendRequest({
        address: `warehouse/plOrder/orderDetail//${id}`,
        params: {},
        success: (resp: RespData) => {
          if(resp.code !== 0) return 
					details.list = resp.data.details
          details.data = resp.data
        },
        fail: (resp: RespData) => {
          if(resp.code !== 0) return 
          
        },
        method: "GET",
      })
    }
    req()

    const btnData: BtnData[] = [
      {
				name: '取消',
				func: (row:boolean) => {
					console.debug('取消',JSON.parse(JSON.stringify(row)))
          details.dialogVisible = row
				}
			},
			{
				name: '确定',
				func: (row:boolean) => {
							console.debug('确定',row)
              if(details.radioExamine === '通过') {
                Examine('warehouse/plOrder/performOrder/')
                details.dialogVisible = row
              } else if (details.radioExamine === '不通过') {
                Examine('warehouse/plOrder/noPassOrder/')
                details.dialogVisible = row
              }
				}
			},
    ]

    const Examine = (url: string) => {
      request.sendRequest({
        address: url + id,
        params: {},
        success: (resp: RespData) => {
          if(resp.code !== 0) return ElMessage.error(resp.msg)
          ElMessage.success('操作成功' || resp.msg)
        },
        fail: (resp: RespData) => {
          if(resp.code !== 0) return ElMessage.error(resp.msg)
          
        },
        method: "POST",
      })
    }
    const cancelDelivery = () => {
      Examine('warehouse/plOrder/cancelOrder/')
    }

    const goExamine = () => {
      details.dialogVisible = true
    }
    const close = () => {
      details.dialogVisible = false
    }
    return {
      groupData,
      orderIsSelf,
      ...toRefs(details),
      request,
      goBack,

      btnData,

      goExamine,
      cancelDelivery,
      close
    }
  }
})
</script>

<style lang="scss" scoped>
.manage {
  padding: 20px;
  box-sizing: border-box;
  // overflow: hidden;
}

.content {
  height: calc(100% - 100px);
}
</style>